<template>
  <div class="app-container edit-dialog-box">
    <div class="form-box  jsp-scroller" style="max-height:630px;overflow-y:scroll">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-tabs type="border-card" class="form-tabs">
          <el-tab-pane :label="$t('common.edit_info')" class="form-tabs-tab-pane">
            <el-collapse v-model="activeForm">
              <el-collapse-item :title="$t('common.basic_info')" name="1">

                <!-- 栏目类型 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('infoCategory.type')" prop="type">
                      <el-radio-group v-model.number="form.type" :disabled="editDetail.id>0" :placeholder="$t('infoCategory.type_tips')">
                        <el-radio v-for="item in dictionaryService.getItems('infoCategoryTypeVar')" :key="item.id" :label="Number(item.value)">{{ item.name }}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <!-- 模型 -->
                <el-row v-show="form.type==2" :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('infoCategory.info_model_id')"
                      prop="info_model_id"
                      :rules="{ required:form.type==2, message: $t('infoCategory.info_model_id_tips'), trigger: ['change'] }"
                    >
                      <el-select
                        v-model.number="form.info_model_id"
                        :placeholder="$t('infoCategory.info_model_id_tips')"
                        :disabled="editDetail.id>0"
                        clearable
                      >
                        <el-option
                          v-for="item in info_model_list"
                          :key="item.id"
                          :label="item.name"
                          :value="Number(item.id)"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 上一级栏目 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('infoCategory.parent_name')"
                      prop="parent_id"
                    >
                      <el-cascader
                        v-model="cate_parent_ids"
                        :options="parentCategoryData"
                        :props="{ checkStrictly: true, children: 'children', label: 'name', value: 'id'}"
                        :placeholder="$t('infoCategory.parent_name_tips')"
                        filterable
                        clearable
                        @change="parentParentChange"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 栏目名称 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('infoCategory.name')" prop="name">
                      <el-input v-model="form.name" :placeholder="$t('infoCategory.name_tips')" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 栏目英文名称 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('infoCategory.enname')" prop="enname">
                      <el-input v-model="form.enname" :placeholder="$t('infoCategory.enname_tips')" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 栏目图标 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('infoCategory.icon')" prop="icon">
                      <jsp-icon-picker v-model="form.icon" />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 封面图 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('common.cover_image')"
                      prop="cover_image"
                    >
                      <jsp-image-upload
                        :title="$t('common.cover_image')"
                        :default-list="cover_imageList"
                        :action="fileUploadConfig.imageAction"
                        :headers="fileUploadConfig.headers"
                        :size="Number(fileUploadConfig.allowImageSize)"
                        :accept="fileUploadConfig.allowImageTypeList"
                        :modal="false"
                        @error="(error)=>{error!=null && $message.error(error)}"
                        @change="handleImageUploadChange"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 关键词 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('common.keywords')" prop="keywords">
                      <jsp-tags
                        :data="form.keywords"
                        :limit="20"
                        @change=" (tags) => form.keywords = tags "
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 栏目描述 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('infoCategory.description')"
                      prop="description"
                    >
                      <el-input
                        v-model="form.description"
                        type="textarea"
                        :placeholder="$t('infoCategory.description_tips')"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 链接地址 -->
                <el-row v-show="form.type == 4" :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('common.href')"
                      prop="href"
                      :rules="{ required: (form.type==4), message: $t('common.href_tips'), trigger: ['blur'] }"
                    >
                      <el-input
                        v-model="form.href"
                        :placeholder="$t('common.href_tips')"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 打开方式 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('common.href_target')"
                      prop="href_target"
                    >
                      <el-select
                        v-model="form.href_target"
                        :placeholder="$t('common.href_target_tips')"
                        clearable
                      >
                        <el-option
                          v-for="item in dictionaryService.getItems('hrefTargetTypeVar')"
                          :key="item.id"
                          :label="item.name"
                          :value="item.value"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 链接关系XFN -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item :label="$t('common.rel')" prop="rel">
                      <el-select
                        v-model="form.rel"
                        :placeholder="$t('common.rel_tips')"
                        clearable
                      >
                        <el-option
                          v-for="item in dictionaryService.getItems('relTypeVar')"
                          :key="item.id"
                          :label="item.name"
                          :value="item.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 发布状态 -->
                <el-row :gutter="20" type="flex" justify="center">
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('common.status')"
                      prop="status"
                    >
                      <el-select
                        v-model.number="form.status"
                        :placeholder="$t('common.pleaseSelect')+$t('common.status')"
                        clearable
                      >
                        <el-option
                          v-for="item in dictionaryService.getItems('statusVar')"
                          :key="item.id"
                          :label="item.name"
                          :value="Number(item.value)"
                        />

                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item v-show="form.type != 4" :title="$t('infoCategory.template_info')" name="2">
                <!-- 频道/列表/单页栏目首页  -->
                <el-row
                  :gutter="20"
                  type="flex"
                  justify="center"
                >
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('infoCategory.index_template')"
                      prop="index_template"
                    >
                      <el-input v-model="form.index_template" :placeholder="$t('infoCategory.index_template_tips')" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 栏目列表 -->
                <el-row
                  v-show="form.type == 2"
                  :gutter="20"
                  type="flex"
                  justify="center"
                >
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('infoCategory.list_template')"
                      prop="list_template"
                    >
                      <el-input v-model="form.list_template" :placeholder="$t('infoCategory.list_template_tips')" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 内容页 -->
                <el-row
                  v-show="form.type == 2"
                  :gutter="20"
                  type="flex"
                  justify="center"
                >
                  <el-col :xs="24" :sm="24" :md="20" :lg="18" :xl="16">
                    <el-form-item
                      :label="$t('infoCategory.article_template')"
                      prop="article_template"
                    >
                      <el-input v-model="form.article_template" :placeholder="$t('infoCategory.article_template_tips')" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>

              </el-collapse-item>
            </el-collapse>
          </el-tab-pane>

        </el-tabs>
      </el-form>
    </div>
  </div>
</template>

<script>
import JspImageUpload from '@/components/JspImageUpload'
import JspIconPicker from '@/components/JspIconPicker'
import JspTags from '@/components/JspTags'
import { show, update, store, getParentTreeConfig } from '@/api/info-category'
import { loadingStart } from '@/utils/loading-service'
import { mapGetters } from 'vuex'
import { getInfoCategoryModelConfig } from '@/api/info-model'

// export
export default {
  name: 'InfoCategoryEditDialog',
  components: {
    JspImageUpload,
    JspIconPicker,
    JspTags
  },
  props: {
    editDetail: { // 详情
      type: Object,
      default: function() {
        return {
          id: 0,
          parent_id: 0
        }
      }
    }
  },
  data() {
    return {
      activeForm: ['1', '2'],
      form: {
        type: 1,
        info_model_id: '',
        parent_id: 0,
        name: '',
        enname: '',
        icon: '',
        cover_image: 0,
        keywords: [],
        description: '',
        href: '',
        href_target: '_self',
        rel: '',
        sort: 999,
        status: 1,
        index_template: '',
        list_template: '',
        article_template: ''
      },
      info_model_list: [],
      // 封面图列表: 请求附件接口
      cover_imageList: [
      ],
      // 表单输入校验 ，通过prop="name"属性进行控制
      rules: {
        type: [{ required: true, message: this.$t('infoCategory.type_tips'), trigger: 'change' }],
        name: [
          { required: true, message: this.$t('infoCategory.name_tips'), trigger: 'blur' },
          { min: 2, max: 50, message: this.$t('infoCategory.name_length_tips'), trigger: 'blur' }
        ]
      },
      // 上级栏目数据
      parentCategoryData: [],
      cate_parent_ids: []
    }
  },
  computed: {
    ...mapGetters(['fileUploadConfig'])
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 内容详情
    async getDetail() {
      const loading = loadingStart({ querySelector: '.edit-dialog-box' })
      const { id, parent_id } = this.editDetail
      if (id > 0) {
        const response = await show(id).catch(() => {
          this.$emit('error', null)
        })
        if (response === undefined) return
        for (const key in response.data) {
          if (key in this.form) {
            this.form[key] = response.data[key]
          }
        }

        // 封面图
        this.cover_imageList = this.form.cover_image
        this.form.cover_image = this.form.cover_image.map((item) => {
          return item.id
        }).join(',')
      }

      // 模型列表
      await getInfoCategoryModelConfig().then((response) => {
        this.info_model_list = response.data.items
      }).catch(() => {})

      // 上级栏目
      await getParentTreeConfig((id === 0 && parent_id > 0 ? parent_id : id)).then((response) => {
        const { items, parent_ids } = response.data
        this.parentCategoryData = items
        this.cate_parent_ids = parent_ids
      }).catch(() => {})

      if (id === 0 && parent_id > 0) {
        this.cate_parent_ids.push(parent_id)
        this.form.parent_id = parent_id
      }

      loading.close()
    },
    onSubmit() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          if (this.editDetail.id) {
            await update(this.editDetail.id, this.form).then((response) => {
              this.$emit('success', response)
            }).catch(() => {
              this.$emit('error', null)
            })
          } else {
            await store(this.form).then((response) => {
              this.$emit('success', response)
            }).catch(() => {
              this.$emit('error', null)
            })
          }
        } else {
          this.$emit('error', this.$t('common.pleaseFillRequired'))
        }
      })
    },
    handleImageUploadChange(result) {
      this.form.cover_image = result.ids
    },
    // 选择上级栏目
    parentParentChange(e) {
      this.form.parent_id = e && e.length > 0 ? e[e.length - 1] : 0
    }
  }
}
</script>

<style scoped lang="scss">
</style>
